<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/12/15
  Time: 10:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath()+"/";%>
<html>
<head>
    <base href="<%=path%>">
    <title>Title</title>
    <link href="static/js/plugins/bootstraptabletree/jquery.treegrid.css" rel="stylesheet">
    <link href="static/css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
    <link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
    <link href="static/js/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

</head>
<style>
    #query ul li{
        display: inline-block;
        list-style: none;
        float:left;
        width:300px;
        margin-top:5px;
    }
    #query ul li input,select{
        width:200px;
        display:inline-block;
    }
</style>
<body style="background-color: gainsboro;overflow-x: hidden;">
<div class="container-fluid" style="padding: 0 28px;height: 100%;">
    <div class="row">
        <div class="col-md-12">
            <div id="query" class="row" style="background-color: white;height: 80px;border-radius: 10px;margin:10px 10px 10px 10px;padding: 10px;">
                <form id="queryForm">
                    <input id="deptId" type="hidden" name="deptId"/>
                <ul>
                    <li>
                      菜单名称：  <input name="menuName" type="text" class="form-control" placeholder="登录名称">
                    </li>
                    <li>
                        菜单状态：
                        <select name="status" class="form-control" style="width: 200px;display: inline-block">
                            <option value="-1">--全部--</option>
                            <option value="0">启用</option>
                            <option value="1">禁用</option>
                        </select>
                    </li>
                    <li>
                        <button type="button" class="btn btn-primary" onclick="refresh();">筛选</button>
                        <button  class="btn btn-success" type="reset">重置</button>
                    </li>
                </ul>
                </form>
            </div>
            <div class="row" style="background-color: white;height: auto;border-radius: 10px;margin:10px 10px 10px 10px;padding: 5px;">
                <table id="table"
                ></table>
            </div>
            <div id="toolbar">
                <button type="button" class="btn btn-primary" onclick="add()"><span class="glyphicon glyphicon-plus"></span> 新增</button>
                <button type="button" class="btn btn-danger" onclick="deletes();"><span class="glyphicon glyphicon-trash"></span>&nbsp;批量删除</button>
                <button type="button" class="btn btn-primary" onclick="edit2()"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改</button>


            </div>
        </div>
    </div>
</div>
</body>
<script src="static/js/jquery.min.js?v=2.1.4"></script>
    <script src="static\js\plugins\bootstraptabletree\jquery.treegrid.min.js"></script>
    <script src="static/js/bootstrap.min.js?v=3.3.7"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<!--jquery-treegrid v0.3.0 -->
    <script src="static/js/plugins/bootstraptabletree/bootstrap-table-grid.js"></script>
    <script src="static/js/plugins/layer/layer.min.js"></script>
<script src="static/js/plugins/ztree/js/jquery.ztree.core.js"></script>
<script src="static/sofwin.js"></script>

<script>

    var index;
    // 发送异步请求获取Json数组

    // columns:定义列
    // title: 定义列标题的
    // field:远程异步返回的数据中(json数组）
    // 数组中json对象的属性的属性名
    let columns=[{
       checkbox:true
    },{
        field:'menuName',
        title:'资源名称',
        formatter:function(a,b,c,d){
            return '<i class="fa '+b.menuIcon+'"></i>'+b.menuName;
        }
    },{
        field:'url',
        title:'资源路径'
    },{
        field:'menuIcon',
        title:'资源图标'
    },{
        field:'target',
        title:'打开方式'
    },{
        title:'状态',
        formatter:function(a,b,c,d){
        if(b.status==0){
        return '<span class="label label-success">启用</span>';
        }
        return '<span class="label label-danger">禁用</span>';

        }
    },
    {
    title: '操作',
    width:220,
    formatter:function(value,row,index,field){
    return '        <button type="button" onclick="dele('+row.id+')" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span>&nbsp;删除</button>\n' +
    '                <button type="button" class="btn btn-primary btn-sm" onclick="edit('+row.id+')"><span class="glyphicon glyphicon-edit" ></span>&nbsp;修改</button>'+
    '                <button type="button" class="btn btn-primary btn-sm" onclick="add2('+row.id+')"><span class="glyphicon glyphicon-plus" ></span>&nbsp;新增</button>';
    }
    }];
$.initTableTree(columns,'menu/data',"id","menuName","parentId");
    function permission(roleId){
        index = layer.open({
            type:2,
            content:'role/toPermission?roleId='+roleId,
            title:'角色权限',
            area:['500px','400px'],
            offset: 'auto',
            maxmin:true
        });
    }
    function dele(id){
        layer.confirm("确认是否删除吗？",function(){
            $.operator.delete('role/dele/'+id,function(ret){
                if(ret.code==200){
                    this.refresh();
                }
                layer.msg(ret.message);
            });
        })

    }
    function deletes(){
        let objs=$("#table").bootstrapTable("getSelections");
        if(objs.length==0){
            layer.alert("请选择要删除的数据");
            return;
        }
        layer.confirm("确定要删除选中的"+objs.length+"条数据吗？",function(){
           let ids = new Array();
           for(let i=0;i<objs.length;i++){
               ids.push(objs[i].id);
           }
           $.operator.get('role/deletes',{ids:ids},function(ret){
               if(ret.code==200){
                   this.refresh();
               }
               layer.msg(ret.message);
           })
        });
    }
    function refresh(){
        $.refresh();
    }
    function edit2(){
        let objs=$("#table").bootstrapTable("getSelections");
        if(objs.length==0){
            layer.alert("请选择要修改的数据");
            return;
        }
        if(objs.length>1){
            layer.alert("请选择要一条需要修改数据");
            return;
        }
        edit(objs[0].id);
    }
    function edit(id){
        index = layer.open({
            type:2,
            content:'role/toEdit?id='+id,
            title:'角色修改',
            area:['500px','400px'],
            offset: 'auto',
            maxmin:true
        });
        layer.full(index);
    }
    function add(){
         index = layer.open({
            type:2,
            content:'menu/toEdit',
            title:'菜单新增',
            maxmin:true
        });
        layer.full(index);
    }
    function add2(parentId){
    index = layer.open({
    type:2,
    content:'menu/toEdit?parentId='+parentId,
    title:'菜单新增',
    maxmin:true
    });
    layer.full(index);
    }
    function close(){
        layer.close(index);
    }
</script>

</html>
